<template>
  <div id="map" ref="echars">
    <canvas></canvas>
  </div>
</template>


<script>
import "../../../assets/common/map/bmap.min.js";
import { mapGetters } from "vuex";
export default {
  props: {
    checkNodeList: Array
  },
  data() {
    return {
      option: {
        title: {
          text: "全国厂房分布图",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: function(param) {
            console.log(param);
            return param.data.value[3];
          }
        },
        bmap: {
          center: [107.114129, 35.550339],
          zoom: 6,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3"
                }
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#fdfdfd"
                }
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999"
                }
              }
            ]
          }
        },
        series: [
          {
            name: "pm2.5",
            type: "scatter",
            coordinateSystem: "bmap",
            // data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "purple"
              }
            }
          }
        ]
			},
			myChart: null
    };
  },
  computed: {
    ...mapGetters(["resize"])
  },
  watch: {
    checkNodeList: {
      deep: true,
      handler() {
        this.onloadMap();
      }
		},
		resize(val) {
			console.log("进来了");
      this.againRender();
    },
  },
  mounted() {
    	// let myChart = this.$refs.echars
			// console.log(myChart);
		// window.onresize = () => {
		// 	this.myChart.resize();
    // }
	     
			
  },
  methods: {
    convertData(data) {
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let array = [data[i].log, data[i].lat, 100, data[i].label];
        res.push({
          name: data[i].name,
          value: array
        });
      }
      return res;
    },
    //重新加载
    onloadMap() {
      this.option.series[0].data = this.convertData(this.checkNodeList);
      this.myChart = this.$echarts.init(document.getElementById("map"));
      this.myChart.setOption(this.option, true);
		},
		againRender() {
			this.$nextTick(() => {
	      this.myChart .resize();
			})
    },
  }
};
</script>

<style lang="less" scoped>
#map {
  float: left;
  height: 100%;
  width: 85.9%;
}
</style>